<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 1150px;
            height: 625px;
            background-color: pink;
            margin: auto;
        }
        .box li:nth-of-type(5n){
            margin-right: 0;
        }
        li{
            list-style: none;
            width: 200px;
            height: 300px;
            /* margin-left: 25px; */
            margin-bottom: 25px;
            margin-left: 25px;
            background-color: orange;
            float: left;
            text-align: center;
            /* 平移的时间 */
            transition: all .3s;
        }
        .box li:hover{
            /* 元素阴影 */
            box-shadow: 0 15px 15px black;
            /* 元素平移的方向 */
            transform: translate(0,-3px);
        }
        img{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            margin: auto;
        }
        p{
            margin-top: 10px;
            margin-bottom: 10px;
            /* text-align: center; */
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            
        </ul>
    </div>
</body>
</html>
<script>
    var data=[
        {
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        },{
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        },{
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        },{
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        },{
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        },{
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        },{
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        },{
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        },{
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        },{
            tx:'./蔡徐坤.webp',
            xm:'蔡徐坤',
            nl:26,
            zy:'歌手'
        }
    ]
    var ul=document.querySelector('ul')
    //循环遍历数组
    for(i=0;i<data.length;i++){
        //创建
        var li=document.createElement('li')
        //赋值
        li.innerHTML=`
                <img src="${data[i].tx}">
                <p>姓名:${data[i].xm}</p>
                <p>年龄:${data[i].nl}</p>
                <p>职业:${data[i].zy}</p>
        `;
        //添加
        ul.appendChild(li)
    }
</script>